{layout name="public/layout" /}
{include file='yxnavbar'}


{include file='../../plugin/shopplan/template/web/shopplan_common_nav'}
{if $system['is_shop_plan']==1}
<script type="text/javascript">
	function changeStore(){
		var themeid = $('#themeid option:selected').val();
		var postUrl = "{php echo createWebUrlPlugin('shopplan.speciallist',array('themeid'=>$themeid));}";
		postUrl+='&themeid='+themeid;
		window.location.href = postUrl;
	}

</script>
<style type="text/css">

	#form3 input,#form4 input{
		max-width: 100px;
	}
	.laydate-time-list>li:nth-child(3){
		display: none;
	}
	.layui-laydate-list{
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>
<div class="panel panel-default" role="tabpanel" style="">
	<span class="help-block" style=" float:right;">
	</span>

	<div class="panel-heading">规划列表
		{if count($themelist)>1 }
		<div class="col-xs-12 col-sm-2 col-md-2" style="float: right;margin-top: -7px">
			<select onchange="changeStore();" class="form-control" name="themeid" id="themeid">
				{loop $themelist $row}
				<option value="{$row['id']}" {if $themeid == $row['id'] }selected="selected"{/if}>{$row['id']} - {php echo mb_substr($row['title'],0,8,'utf-8');}</option>
				{/loop}
			</select>
		</div>
		{else}
		<input type="hidden" name="themeid" value="{$themeid}" />
		{/if}
		<div class="col-xs-12 col-sm-2 col-md-2" style="float: right;margin-top: 0px">
			<a style="background-color:#428bca;padding: 5px 10px; color: white;border-radius:5px;clear: both;" href="javascript:isShowPlan2(true)"><i class="glyphicon glyphicon-plus" title="addHolidays"></i>新增规划</a>
		</div>
	</div>

	<div class="panel-body table-responsive">
		<table class="table table-hover">
			<thead class="navbar-inner">
			<tr>
				<th>规划编号</th>
				<th>规划名称</th>
				<th>规划状态</th>
				<!--<th>年龄限制</th>-->
				<th>操作</th>
			</tr>
			</thead>
			<tbody id="yx_special_plan">
			{loop $tplitem $key $s_work}
			<tr >
				<td>{$s_work['id']}</td>
				<td>{$s_work['tplname']}</td>
				<td>
					<a href="{php echo createWebUrlPlugin('shopplan.tplstatus',array('s_workid'=>$s_work['id'],'status'=>$s_work['status'],'themeid'=>$themeid,'storeid'=>$storeid,'plantimeid'=>$plantimeid,'shopname'=>$shopname,'shopid'=>$shopid));}" onclick="if(!confirm('您要改变规划{$s_work['tplname']}的状态？')) return false;">
						{if $s_work['status']==1}
						<div>
							<div>
								<span style="background-color: #428bca; padding: 2px 8px;border:1px solid #CCCCCC;border-radius:5px;color: white;">ON</span>
								<span style="background-color: #ffffff; padding: 2px 7px;border:1px solid #CCCCCC;border-left: 0px;border-radius:3px; margin-left:-6px;color: #ffffff;">OFF</span>
							</div>
						</div>
						{else}
						<div>
							<div>
								<span style="background-color: #ffffff; padding: 3px 10px;border:1px solid #CCCCCC;border-radius:5px;color: #ffffff;">ON</span>
								<span style="background-color: #eeeeee; padding: 3px 8px;border:1px solid #CCCCCC;border-left: 0px;border-radius:3px;margin-left:-12px;color: #000000;">OFF</span>
							</div>
						</div>

						{/if}
					</a>
				</td>

				<td>
					<!-- <a style="background-color: #5cb85c; padding: 3px 10px;border-radius:5px; text-align:center;color: white;" href="{php echo createWebUrlPlugin('shopplan.editspecial',array('id'=>$s_work['id'],'themeid'=>$themeid,'plantimeid'=>$plantimeid));}">编辑</a> -->
					<a style="background-color: #5cb85c; padding: 3px 10px;border-radius:5px; text-align:center;color: white;" href="javascript:isShowPlan({$s_work['id']})">编辑</a>&nbsp;&nbsp;&nbsp;&nbsp;
					<a style="background-color: #ca4242; padding: 3px 10px;border-radius:5px; text-align:center;color: white;" href="{php echo createWebUrlPlugin('shopplan.delspecial',array('id'=>$s_work['id']));}" onclick="if(!confirm('删除后将不可恢复，确定删除吗?')) return false;">删除</a>
				</td>
			</tr>
			{/loop}
			</tbody>
		</table>
	</div>


	<!--	<div class="panel-body" style="">-->
	<!--            <div class="form-group" style="overflow: hidden;">-->
	<!--                <div class="col-sm-8 col-xs-12">-->
	<!--					<table class="table table-hover">-->
	<!--						<thead class="navbar-inner">-->
	<!--							<tr>-->
	<!--								<th>规划编号</th>-->
	<!--								<th>规划名称</th>-->
	<!--								<th>规划状态</th>-->
	<!--								&lt;!&ndash;<th>年龄限制</th>&ndash;&gt;-->
	<!--								<th>操作</th>-->
	<!--							</tr>-->
	<!--						</thead>-->
	<!--						<tbody id="yx_special_plan">-->
	<!--						{loop $tplitem $key $s_work}-->
	<!--						<tr >-->
	<!--							<td>{$s_work['id']}</td>-->
	<!--							<td>{$s_work['tplname']}</td>-->
	<!--							<td>-->
	<!--								<a href="{php echo createWebUrlPlugin('shopplan.tplstatus',array('s_workid'=>$s_work['id'],'status'=>$s_work['status'],'themeid'=>$themeid,'storeid'=>$storeid,'plantimeid'=>$plantimeid,'shopname'=>$shopname,'shopid'=>$shopid));}" onclick="if(!confirm('您要改变规划{$s_work['tplname']}的状态？')) return false;">-->
	<!--								{if $s_work['status']==1}-->
	<!--								<div>-->
	<!--									<div>-->
	<!--										<span style="background-color: #428bca; padding: 2px 8px;border:1px solid #CCCCCC;border-radius:5px;color: white;">ON</span>-->
	<!--										<span style="background-color: #ffffff; padding: 2px 7px;border:1px solid #CCCCCC;border-left: 0px;border-radius:3px; margin-left:-6px;color: #ffffff;">OFF</span>-->
	<!--									</div>-->
	<!--								</div>-->
	<!--								{else}-->
	<!--								<div>-->
	<!--									<div>-->
	<!--										<span style="background-color: #ffffff; padding: 3px 10px;border:1px solid #CCCCCC;border-radius:5px;color: #ffffff;">ON</span>-->
	<!--										<span style="background-color: #eeeeee; padding: 3px 8px;border:1px solid #CCCCCC;border-left: 0px;border-radius:3px;margin-left:-12px;color: #000000;">OFF</span>-->
	<!--									</div>-->
	<!--								</div>					-->
	<!--								-->
	<!--								{/if}-->
	<!--								</a>						-->
	<!--							</td>-->
	<!--												-->
	<!--							<td>-->
	<!--								&lt;!&ndash; <a style="background-color: #5cb85c; padding: 3px 10px;border-radius:5px; text-align:center;color: white;" href="{php echo createWebUrlPlugin('shopplan.editspecial',array('id'=>$s_work['id'],'themeid'=>$themeid,'plantimeid'=>$plantimeid));}">编辑</a> &ndash;&gt;-->
	<!--								<a style="background-color: #5cb85c; padding: 3px 10px;border-radius:5px; text-align:center;color: white;" href="javascript:isShowPlan({$s_work['id']})">编辑</a>&nbsp;&nbsp;&nbsp;&nbsp;-->
	<!--								<a style="background-color: #ca4242; padding: 3px 10px;border-radius:5px; text-align:center;color: white;" href="{php echo createWebUrlPlugin('shopplan.delspecial',array('id'=>$s_work['id']));}" onclick="if(!confirm('删除后将不可恢复，确定删除吗?')) return false;">删除</a>-->
	<!--							</td>-->
	<!--						</tr>-->
	<!--						{/loop}-->
	<!--						</tbody>-->
	<!--					</table>						-->
	<!--                </div>-->
	<!--            </div>	  -->
	<!--            <div class="form-group" style="text-align: center;">-->
	<!--				<a style="background-color:#428bca;padding: 10px 20px; color: white;border-radius:5px;clear: both;" href="javascript:isShowPlan2(true)"><i class="glyphicon glyphicon-plus" title="addHolidays"></i>新增规划</a> 		-->
	<!--            </div>	-->
	<!--		</div>-->
	<!--	</div>-->



	<div id='editrules'  style="display: block;">

	</div>
	<form id="form4"  action="{php echo createWebUrlPlugin('shopplan.setspecial',array('themeid'=>$themeid,'plantimeid'=>$id));}" enctype ="multipart/form-data" method="post" style="display: none">
		<div class="panel panel-default" role="tabpanel" style="">
			<div class="panel-heading">新增规划<a href="javascript:isShowPlan2(false)" style="float: right;">关闭</a></div>
			<div class="panel-body" >
				<div class="form-group">
					<label class="col-xs-12 col-sm-2 col-md-2 control-label"><b>规划名称</b></label>
					<div class="col-sm-3 col-xs-3 col-md-3" >
						<input class=" form-control span3" type="text" name="tplname" maxlength="18" value="" style="max-width: 400px;width: 400px;">
						<span class="help-block">最大长度18个字</span>
					</div>
				</div>

				<div class="form-group">
					<label class="col-xs-12 col-sm-2 col-md-2 control-label"><b>工作日规划</b></label>
					<div class="col-sm-10 col-xs-12">
						<table class='table'>
							<thead>
							<tr>
								<th>每工作日可预约时间段</th>
								<th>本时间段可预约客户数量</th>
								<th class="agelimit" style=" display:none;">本时间段适用的宝宝月龄</th>
								<th>操作</th>
							</tr>
							</thead>
							<tbody id="yx_special_plan_items">
							{if empty($work_rules)}
							<tr >
								<td><input id="add_time_picker0" class="time_picker" type="text" name="s_work[0][worktimes]" value="08:45" /></td>
								<td><input name="s_work[0][nums]" type="number" min="0" value="0"/></td>
								<td class="agelimit" style=" display:{if $item['agelimit']==1} block {else} none{/if};">开始月龄<input type="number" name="s_work[0][ages_start]" value="0" min="0">&nbsp;&nbsp;&nbsp;&nbsp;最大月龄<input type="number" name="s_work[0][ages_end]" value="1200" min="0"></td>
								<td><input  name="s_work[0][id]" type="hidden" value="" /><a style="background-color: #ca4242; padding: 3px 10px;border-radius:5px; text-align:center;color: white;" href='javascript:;' onclick='removePlanItem2(this)'>删除</a></td>
							</tr>
							{else}
							{loop $work_rules $key $w_rule}
							<tr >
								<td><input id="add_time_picker{$key}" class="time_picker" name="s_work[{$key}][worktimes]" type="text"  value="{$w_rule['worktimes']}"/></td>
								<td><input name="s_work[{$key}][nums]" type="number" min="0"  value="{$w_rule['nums']}"/></td>
								<td class="agelimit" style=" display: {if $item['agelimit']==1} block {else} none{/if};">开始月龄<input type="number" name="s_work[{$key}][ages_start]" value="{$w_rule['ages_start']}" min="0">&nbsp;&nbsp;&nbsp;&nbsp;最大月龄<input type="number" name="s_work[{$key}][ages_end]" value="{$w_rule['ages_end']}" min="0"></td>
								<td><input  name="s_work[{$key}][id]" type="hidden" value="" /><a style="background-color: #ca4242; padding: 3px 10px;border-radius:5px; text-align:center;color: white;" href='javascript:;' onclick='removePlanItem2(this)'>删除</a></td>
							</tr>
							{/loop}
							{/if}
							</tbody>
						</table>
						<a href="javascript:;" onclick="addspecialPlan2();" style="background-color:#428bca;padding: 5px 10px; color: white;border-radius:5px;"><i class="glyphicon glyphicon-plus" title="addPlan"></i>添加时间段</a>
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-12">
						<input id="btn_submit"  value="提交" class="btn btn-primary col-lg-1"  type="submit">
						<input type="hidden" name="__token__" value="{$Request.token}" />
					</div>
				</div>
			</div>
		</div>
</div>
</form>
<script>
	var last_time = '8:45';
	//编辑规则
	function isShowPlan(flag){
		if(flag){
			$("#editrules").empty();
			$("#form4").hide();
			var id=flag;
			var postUrl = "{php echo createWebUrlPlugin('shopplan.editspecial',array('themeid'=>$themeid,'plantimeid'=>$plantimeid));}";
			postUrl+="&id="+id;

			$.ajax({
				url:postUrl,
				dataType:'json',
				method:'post',
				success:function (e) {
					var status = e.error;
					var ruleBtn = e.data.data;
					last_time = e.data.last_time;
					if (status!=0){
						layer.msg(e.msg)
					}else{
						// layer.msg(e.msg);
						$("#editrules").append(ruleBtn);
						$("#editrules").show();
						$(".time_picker").click(function (){
							let _this=$(this);
							if($(this).attr("init_flag"))return;
							let id=$(this).attr("id");
							layui.use('laydate', function(){
								var laydate = layui.laydate;

								laydate.render({
									elem: "#"+id
									,type: 'time'
									,format: 'HH:mm'
									,trigger: 'click'
								});
							});
							_this.attr("init_flag",true);
							_this.click();
						});
					}
				}
			});
		}else{
			$("#editrules").empty();
			$("#editrules").hide();
		}
	}

	//提交编辑完成的规划
	function sendEditRules(id){
		var postUrl = "{php echo createWebUrlPlugin('shopplan.editspecialsave',array('themeid'=>$themeid,'plantimeid'=>$plantimeid));}";
		var formData = $("#form3").serialize();
		postUrl+='&id='+id;

		$.ajax({
			type:'POST',
			dataType:'json',
			url:postUrl,
			data:formData,
			success:function (res){
				isShowPlan(id);
			}
		});
	}

	//新增规划
	function isShowPlan2(flag){
		if(flag){
			$("#form4").show();
			$("#editrules").empty();
			$("#editrules").hide();
		}else{
			$("#form4").hide();
		}
	}
	//新增规划 <!--增加工作日时间规则-->
	function addspecialPlan2() {
		last_time = '8:45';
		var k = $("#yx_special_plan_items").find('tr').size();
		//var agelimit = $("input[name='agelimit']:checked").val();
		var agelimit = {$item['agelimit']};
		var html = "<tr>";
		html += '<td><input id="add_time_picker'+k+'" type="text" name="s_work[' +k+ '][worktimes]" value="'+last_time+'"/></td>';
		html += '<td><input name="s_work[' +k+ '][nums]" type="number" min="0" value="1" /></td>';
		if(agelimit == 1){
			html += '<td class="agelimit" style=" display:block;">开始月龄<input type="number" name="s_work[' +k+ '][ages_start]" value="0" min="0">&nbsp;&nbsp;&nbsp;&nbsp;最大月龄<input type="number" name="s_work[' +k+ '][ages_end]" value="1200" min="0"></td>';
		}else{
			html += '<td class="agelimit" style=" display:none;">开始月龄<input type="number" name="s_work[' +k+ '][ages_start]" value="0" min="0">&nbsp;&nbsp;&nbsp;&nbsp;最大月龄<input type="number" name="s_work[' +k+ '][ages_end]" value="1200" min="0"></td>';
		}

		html += '<td> <input  name="s_work[' +k+ '][id]" type="hidden" value="" />&nbsp;<a style="background-color: #ca4242; padding: 3px 10px;border-radius:5px; text-align:center;color: white;" href="javascript:;" onclick="removePlanItem2(this)" >删除</a></td>';
		html += "</tr>";
		$("#yx_special_plan_items").append(html);
		layui.use('laydate', function(){
			var laydate = layui.laydate;
			console.log("#add_time_picker"+k);
			laydate.render({
				elem: "#add_time_picker"+k
				,type: 'time'
				,format: 'HH:mm'
				,trigger: 'click'
			});
		});
	}
	// 新增规划<!--删除工作日时间规则-->
	function removePlanItem2(obj) {
		$(obj).parent().parent().remove();
	}

	// 编辑规则<!--增加工作日时间规则-->
	function addspecialPlan() {
		var k = $("#yx_special_time_items").find('tr').size();
		var agelimit = {$item['agelimit']};
		var html = "<tr>";
		html += '<td><input id="time_picker'+k+'" type="text" name="s_work[' +k+ '][worktimes]" value="'+last_time+'"/></td>';
		html += '<td><input name="s_work[' +k+ '][nums]" type="number" min="0" value="1" /></td>';
		if (agelimit == 1){
			html += '<td>开始月龄<input type="number" name="s_work[' +k+ '][ages_start]" value="0" min="0">&nbsp;&nbsp;&nbsp;&nbsp;最大月龄<input type="number" name="s_work[' +k+ '][ages_end]" value="1200" min="0"></td>';
		}else{
			html += '<td style=" display:none;">开始月龄<input type="number" name="s_work[' +k+ '][ages_start]" value="0" min="0">&nbsp;&nbsp;&nbsp;&nbsp;最大月龄<input type="number" name="s_work[' +k+ '][ages_end]" value="1200" min="0"></td>';
		}
		html += '<td> <input  name="s_work[' +k+ '][id]" type="hidden" value="" />&nbsp;<a style="background-color: #ca4242; padding: 3px 10px;border-radius:5px; text-align:center;color: white;" href="javascript:;" onclick="removePlanItem(this)" >删除</a></td>';
		html += "</tr>";
		$("#yx_special_time_items").append(html);
		layui.use('laydate', function(){
			var laydate = layui.laydate;
			console.log("#time_picker"+k);
			laydate.render({
				elem: "#time_picker"+k
				,type: 'time'
				,format: 'HH:mm'
				,trigger: 'click'
			});
		});
	}
	// 编辑规则<!--删除工作日时间规则-->
	function removePlanItem(obj) {
		$(obj).parent().parent().remove();
	}
	$(function () {

		$(".time_picker").click(function (){
			let id=$(this).attr("id");
			if($(this).attr("init_flag"))return;
			layui.use('laydate', function(){
				var laydate = layui.laydate;

				laydate.render({
					elem: "#"+id
					,type: 'time'
					,format: 'HH:mm'
					,trigger: 'click'
				});
			});
			$(this).attr("init_flag",true);
			$(this).click();
		});
	})
</script>

{/if}
